<template>
	<div class="p-10 flex-row h100">
		<div class="left system-page-background b-r-4">
			<my-header theme="border-left">
				<template #title>
					<span class="fw f-s-24">项目列表</span>
				</template>
				<template #handle>
					<el-tooltip content="导入" placement="bottom" trigger="hover">
						<my-icon icon="Upload" class="pointer f-s-20" />
					</el-tooltip>
					<el-tooltip content="创建" placement="bottom" trigger="hover">
						<my-icon icon="Add" class="pointer f-s-20 m-l-10" @click="insertFn" />
					</el-tooltip>
				</template>
			</my-header>
			<div class="f1 h0 m-t-10 overflow-x-auto">
				<n-list clickable hoverable>
					<n-list-item
						v-for="item in sceneList"
						:key="item.id"
						class="p-l-10 p-y-5"
						:class="{ select: projectId === item.id }"
						@click="projectId = item.id"
					>
						{{ item.title }}
						<template #suffix>
							<el-dropdown>
								<my-icon icon="caidanShupai" class="f-s-20" />
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item @click="exportFn(item)">导出</el-dropdown-item>
										<el-dropdown-item @click="updateFn(item)">编辑</el-dropdown-item>
										<el-dropdown-item @click="deleteFn(item)">删除</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</template>
					</n-list-item>
				</n-list>
			</div>
		</div>

		<div class="right system-page-background b-r-4 flex-col">
			<rightTable :projectId="projectId" />
		</div>

		<!-- 新增项目 -->
		<el-dialog
			:title="dialogTitle"
			v-model="dialog.open"
			width="500px"
			append-to-body
			@closed="resetForm(refDialogForm)"
		>
			<my-form
				ref="refDialogForm"
				:model="dialog.form"
				label-width="90px"
				:formItem="[
					{ prop: 'title', label: '项目名称', required: true },
					{
						prop: 'target',
						label: '原点'
					}
				]"
				:rules="rules"
			>
				<template #target>
					<div class="flex">
						<my-input-number v-model="dialog.form.pointX" />
						<my-input-number v-model="dialog.form.pointY" class="m-x-10" />
						<my-input-number v-model="dialog.form.pointZ" />
					</div>
				</template>
			</my-form>
			<template #footer>
				<el-button @click.prevent="dialog.open = false">取 消</el-button>
				<el-button type="primary" @click.prevent="dialogSubmitFn()">确 定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="/scene">
import rightTable from './rightTable.vue';
import {
	listProject as list,
	addProject as add,
	editProject as edit,
	removeProject as remove,
	uniqueProject
} from '@/api/scene';

const projectId = ref(''),
	rules = {
		title: [
			{ required: true, message: '不能为空', trigger: 'blur' },
			{ validator: validatorTitle, trigger: 'blur' }
		]
	},
	{
		list: sceneList,
		refDialogForm,
		dialog,
		dialogTitle,
		insertFn,
		deleteFn,
		updateFn,
		dialogSubmitFn
	} = listMixin({
		loadDataCallback: (val) => {
			projectId.value = val[0]?.id;
		},
		list: [
			{
				id: 11111,
				name: '演示项目'
			},
			{
				id: 1111122,
				name: '演示项目2'
			}
		],
		api: { list, remove, add, edit },
		dialogDefault: {
			title: '项目',
			form: {
				pointX: 0,
				pointY: 0,
				pointZ: 0
			}
		}
	});

// 字段去重
function validatorTitle(rule, value, callback) {
	uniqueProject({ title: value, id: dialog.form.id })
		.then((res) => {
			if (!res.data) {
				return callback(new Error('场景名称重复请重新输入！'));
			} else {
				callback();
			}
		})
		.catch(() => {
			callback();
		});
}

// 导出
// import { downloadTextFile, JSONStringify } from '@u';
function exportFn(data) {
	confirm('此操作将导出该数据, 是否继续?')
		.then(() => {
			console.log(data);
			// exportPage({ id: data.id }).then((res) => {
			// 	downloadTextFile(JSONStringify(res), data.title, 'json');
			// });
		})
		.catch(() => {
			msgInfo('已取消操作！');
		});
}
</script>

<style lang="scss" scoped>
.left {
	height: 100%;
	width: 400px;
	overflow: auto;
	display: flex;
	flex-direction: column;
	color: var(--el-text-color-primary);
	.select {
		background-color: var(--n-merged-color-hover);
	}
}
.right {
	margin-left: 10px;
	height: 100%;
	flex: 1;
	width: 0;
}
</style>
